<template>
  <div>
    <!-- 9.4 添加背景色跟文字颜色跟边框 -->
    <!-- <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
      style="border: 0" @open="handleOpen" @close="handleClose"> -->

    <!-- 9.63添加 unique-opened 打开关闭菜单 -->
    <!-- <el-menu default-active="/home" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
      style="border: 0" @open="handleOpen" @close="handleClose" unique-opened active-text-color="#2d81ff"> -->

    <!-- 10.31添加 router 属性，开启路由 -->
    <!-- <el-menu default-active="/home" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
      style="border: 0" @open="handleOpen" @close="handleClose" unique-opened active-text-color="#2d81ff" router> -->

    <!-- 10.41默认高亮改成动态 :default-active 当前路由 route.path -->
    <!-- <el-menu :default-active="route.path" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
      style="border: 0" @open="handleOpen" @close="handleClose" unique-opened active-text-color="#2d81ff" router> -->

    <!-- 14.16添加折叠属性 collapse -->
    <!-- <el-menu :default-active="route.path" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
      style="border: 0" @open="handleOpen" @close="handleClose" unique-opened active-text-color="#2d81ff" router
      :collapse="!asideStore.isCollapse"> -->
    <el-menu :default-active="route.path" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
      style="border: 0" unique-opened active-text-color="#2d81ff" router :collapse="!asideStore.isCollapse">

      <!-- 9.65手动生成首页菜单 -->
      <el-menu-item index="/home">
        <i class="iconfont homepage"></i>
        <!-- 14.17这里添加 v-show 去做首页的文字显隐 -->
        <p v-show="asideStore.isCollapse">首页</p>

      </el-menu-item>

      <!-- el-sub-menu 是一级菜单 -->
      <!-- 9.42将 routesList 的左侧路由数据渲染 -->
      <!-- <el-sub-menu index="1"> -->
      <!-- <el-sub-menu index="1" v-for="item in userStore.routesList" :key="item.id"> -->

      <!-- 9.61遍历自己生成的菜单的数据 -->
      <!-- 9.62添加动态 index 解决高亮的问题 -->
      <el-sub-menu v-for="item in menus" :key="item.id" :index="item.name">
        <template #title>
          <i class="iconfont" :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <!-- el-menu-item 是二级菜单 -->
        <!-- 10.32这里的index因为我们拼接父路由name进去的，所以我们这里的index就不是 subitem.name -->
        <!-- <el-menu-item v-for="subitem in item.children" :key="subitem.id" :index="subitem.name"> -->
        <!-- 10.33然后到了 router文件夹里面的 index.ts -->
        <el-menu-item v-for="subitem in item.children" :key="subitem.id" :index="`/${item.name}/${subitem.name}`">
          <template #title>
            <i class="iconfont" :class="subitem.icon"></i>
            {{ subitem.title }}
          </template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts" setup >
// 9.5导入图标
import { useUserStore } from '@/store/UserStore/userStore'
import { generateMenu } from '@/utils'
import { computed } from 'vue'
// import { Location } from '@element-plus/icons-vue'

// 10.42导入当前路由
import { useRoute } from 'vue-router';
const route = useRoute()

// 14.15导入 asideStore
import { useAsideStore } from '@/store/AsideStore/asideStore'
const asideStore = useAsideStore()


// 9.6把方法拿过来，去到 Home.vue 文件
// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }

// 9.36导入仓库
const userStore = useUserStore();
// 9.37打印查看 左侧路由列表的数组看一下
// console.log(userStore.routesList);
// 9.38 chatGPT怎么循环两级路由数据

// 定义一个函数将树形结构数据转换为菜单数据
// function convertMenuData(menuList: IMenuModel[], parentId = 0) {
// function convertMenuData(menuList: IMenuModel[], parentId = 0) {
//   // 如果当前层级没有数据，则退出递归
//   // if (menuList.length === 0) {
//   //   return null
//   // }
//   // 定义一个数组保存转换后的菜单数据
//   const menuData: IMenuModel[] = [];

//   // 循环遍历树形结构数据中的每一个节点
//   for (let i = 0; i < menuList.length; i++) {
//     // 如果该节点的parentId等于当前节点的id，说明它是当前节点的子节点
//     // 9.39因为我们这里的 hidden 为0是显示，hidden 为1是不显示
//     // if (menuList[i].parentId === parentId) {
//     if (menuList[i].parentId === parentId && menuList[i].hidden === 0) {
//       // 递归调用convertMenuData函数，从而获取当前节点的子节点数据
//       const children = convertMenuData(menuList, menuList[i].id);
//       // 定义一个menuItem对象，用于保存当前节点的菜单数据。其中包括id、title、icon和children属性
//       const menuItem: object = {
//         id: menuList[i].id,
//         title: menuList[i].title,
//         icon: menuList[i].icon,
//         children,
//       };
//       // 将当前节点的菜单数据添加到menuData数组中。
//       menuData.push(menuItem);
//     }
//   }
//   // 返回转换后的菜单数据。
//   return menuData;
// }
// console.log(userStore.routesList)

// 9.43 去到 router 文件夹里面的 index.ts，前置导航守卫用 async await请求，不用定时器请求数据
// 9.45然后将数据存到 pinia里面
// userStore.routesList = convertMenuData(userStore.routesList)

// console.log(userStore.routesList)


// 9.40因为我们的请求回来的数据，比渲染页面的慢。所以我们定时器延迟请求回来
// setTimeout(() => {
//   // 9.41将数据赋值给 pinia 里面的 routesList
//   let result = convertMenuData(userStore.routesList)
//   console.log(result)

// }, 1000);


// 9.46昨天的是使用chatGPT生成，我们自己手动生成一下，上面的方法因为没有加comouted保存缓存数据，所以每次触发刷新都会重新执行pinia的列表渲染
// 全局数据再热更新的时候比较容易出现一些数据残留的问题，所以以后发现全局数据出现问题，记住流程从头走
let menus = computed(() => {
  // 9.47自己转换思路：
  // 9.48循环得出所有的一级菜单,一级菜单的条件是：parentId === 0
  // let level1 = userStore.routesList.filter(item => item.parentId === 0);
  // 9.59进行level1的类型约束
  // 9.60然后去到页面渲染数据

  // 10.3将以下代码拿去 utils 文件夹里面的 index.ts
  // let level1: IModelWithChidren[] = userStore.routesList.filter(item => item.parentId === 0);
  // // 9.49再循环，一级菜单里面的数据找出所有的二级菜单
  // userStore.routesList.forEach(child => {
  //   // 9.50循环一级菜单里面的数据找出对应的子菜单
  //   level1.forEach(parent => {
  //     // 9.51如果二级菜单的 parentId === 父级的id，就是父子关系，放到父级的 children 里面
  //     if (parent.id == child.parentId && child.hidden === 0) {
  //       // 9.52判断如果一级菜单里面如果没有二级菜单，就返回空数组
  //       if (!parent.children) {
  //         parent.children = []
  //       }
  //       // 9.53把筛选好的 child 数据 push 进去一级菜单的二级菜单 children 里面
  //       parent.children.push(child)
  //     }
  //   })
  //   // console.log(level1);
  //   // 9.54返回 level1
  //   // 9.55然后我们处理，之前在 api.d.ts 里面定义接口返回的数据，是没有定义 children 返回值类型约束的，去到该文件


  // })
  // return level1;

  // 10.10这边调用我们 utils 文件夹里面的 index.ts
  let list = generateMenu(userStore.routesList);
  // 10.11我们需要进行条件的判断 hidden 为 0 的才显示
  list.forEach(parent => {
    parent.children = parent.children?.filter(item => item.hidden === 0)
  })
  // 10.11然后返回这个 list
  // 10.12然后去到 router 文件夹里面的 index.vue
  return list;
})

</script>


<style lang="less" scoped>
// 9.64vue3里面如果要修改第三方样式，采用的是 
:deep(.is-active.el-menu-item) {
  .iconfont {
    color: #2d81ff !important;
  }
}

// 10.43添加鼠标移入背景色切换样式
:deep(.el-sub-menu__title):hover {
  background-color: #263445 !important;
}
</style>